<template>
	<view class="content">
		<view style="padding: 0 32rpx">
			<searchHistory localStorageName="homeSearchHistory" placeHolder="搜索" @search="search" @clear="clear">
			</searchHistory>
		</view>

		<view v-if="showInfo" class="display_flex tabs">
			<up-tabs :current="currentTab" lineWidth="56rpx" lineHeight="6rpx"
				:activeStyle="{ color: '#fff', fontSize: '36rpx' }"
				:inactiveStyle="{ color: '#666666', fontSize: '36rpx' }"
				itemStyle="font-weight: 500;margin-bottom:25rpx;width:120rpx;" lineColor="#F3E0BB" :list="tablist"
				@click="clickTab"></up-tabs>
		</view>

		<scroll-view scroll-y="true" :style="{ height: height + 'px' }">
			<view v-if="showInfo">
				<view v-if="worshipList.length > 0" class="worship_search">
					<view class="worship_search_item" v-for="(item, index) in worshipList"
						@click="goUrl('/subPages/worship/detail')">
						<image src="http://112.124.50.179:8888/imgs/worship/worship.png" mode=""></image>
						<view class="worship_search_text">青灵始老苍帝君</view>
					</view>
				</view>
				<view class="search_empty" v-else>
					<image src="http://112.124.50.179:8888/imgs/worship/search_empty.png" mode=""></image>
					<view class="search_empty_text">
						没有找到与您查询相关的内容，不妨换个关键词，也许会有新发现！
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive
	} from 'vue';
	import searchHistory from '/components/searchHistory/index.vue';
	import {
		onHide
	} from '@dcloudio/uni-app';
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom);

	const showInfo = ref(false);
	const tablist = reactive([{
			name: '佛教'
		},
		{
			name: '道教'
		},
		{
			name: '儒教'
		},
		{
			name: '先祖'
		}
	]);
	const currentTab = ref(0); //默认为文章，0
	const worshipList = ref([]);

	//翻页信息
	let height = ref(500); //滚动区域
	const downOption = ref({
		use: false
	});
	const upOption = ref({
		page: {
			size: 10 // 每页数据的数量,默认10
		},
		noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
		empty: {
			tip: '暂无相关数据'
		}
	});

	// 更多按钮
	const showMoreFunc = ref(false);
	const moreBtnStyle = {
		height: '120rpx',
		borderRadius: '26rpx 26rpx 26rpx 26rpx',
		backgroundColor: '#fff',
		fontWeight: '400',
		fontSize: '40rpx',
		color: '#007AFF',
		marginBottom: '16rpx'
	};
	//初始化
	onMounted(() => {
		let tabsHeight = 100;
		let searchHeight = (height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.navHeight -
			80 -
			uni.upx2px(tabsHeight));
		// #ifdef h5
		height.value = height.value - 16;
		// #endif
	});

	/**
	 * 切换tab
	 */
	const clickTab = (item) => {
		currentTab.value = item.index;
	};
	const changTab = (item) => {
		currentTab.value = item.detail.current;
	};

	/**
	 * 搜索
	 */
	const search = (content) => {
		showInfo.value = true;
		console.log(content);
	};

	/**
	 * 清空搜索内容
	 */
	const clear = () => {
		showInfo.value = false;
	};

	const goBack = () => {
		uni.navigateBack();
	};

	// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
	const upCallback = (mescroll) => {
		setTimeout(() => {
			const curPageData = [1, 2, 3, 4, 5, 6]; // 当前页数据
			messageList.value = messageList.value.concat(curPageData); //追加新数据
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		}, 2000);
		// apiGoods(mescroll.num, mescroll.size).then(res => {
		// 	const curPageData = res.list || [] // 当前页数据
		// 	if (mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
		// 	goods.value = goods.value.concat(curPageData); //追加新数据
		// 	mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		// }).catch(() => {
		// 	mescroll.endErr(); // 请求失败, 结束加载
		// })
	};

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};

	const showMore = () => {
		showMoreFunc.value = true;
		uni.hideTabBar();
	};

	const closeMore = () => {
		uni.showTabBar();
		showMoreFunc.value = false;
	};
</script>

<style lang="scss">
	page {
		background-color: #1e201f;
	}

	.tabs {
		padding-bottom: 48rpx;
	}

	.content {
		padding: 0;
	}

	.worship_search {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 94rpx;
		margin: 0 64rpx;

		.worship_search_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 32rpx;

			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
				margin-bottom: 16rpx;
			}

			.worship_search_text {
				width: 144rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 40rpx;
				padding-bottom: 32rpx;
				white-space: nowrap;
				display: flex;
				justify-content: center;
			}
		}
	}

	.search_empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 208rpx;

		image {
			width: 460rpx;
			height: 360rpx;
		}

		.search_empty_text {
			font-weight: 400;
			font-size: 28rpx;
			color: #969da3;
			line-height: 33rpx;
			width: 476rpx;
			text-align: justify;
		}
	}
</style>